<template>
	<view class="content">
		<view class="headImgBox" @tap="chooseAndUploadImage()">
			<image class="img" :src="info.avatar" mode=""></image>
		</view>
		<p class="box-title">个人信息</p>
		<view class="content-box">
			<view class="item_box">
				<p class="item-box-title">个人姓名</p>
				<input class="ipt" type="text" placeholder="请输入个人姓名" v-model="info.nickname">
			</view>
			<view class="item_box">
				<p class="item-box-title">联系电话</p>
				<input class="ipt" type="text" placeholder="请输入联系电话" v-model="info.contact_phone">
			</view>
			<view class="item_box">
				<p class="item-box-title">联系地址</p>
				<input class="ipt" type="text" placeholder="请输入联系地址" v-model="info.address">
			</view>
			<view class="btn-box">
				<view class="cancel-btn" @tap="editInfoCancel()">取消</view>
				<view class="confirm-btn" @tap="editInfo()">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					nickname: '',
					avatar: '',
					contact_phone: '',
					address: ''
				}
			};
		},
		onLoad() {
			this.getIndex()
		},
		methods: {
			editInfoCancel() {
				uni.navigateTo({
					url: '../index/home'
				})
			},
			async getIndex() {
				const {
					data: res
				} = await uni.$http.post('school/index/index')
				if (res.code == 1) {
					this.info.nickname = res.data.nickname
					this.info.avatar = res.data.avatar_url
					this.info.contact_phone = res.data.contact_phone
					this.info.address = res.data.address
				} else {
					this.toast.msg(res.msg)
				}
			},
			chooseAndUploadImage() {
				// 选择图片
				uni.chooseImage({
					count: 1, // 默认9，设置图片的数量
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://haici.snooowball.cn/api/user/uploadImg', // 服务器上传接口地址
							filePath: tempFilePaths[0],
							header: {
								'token': uni.getStorageSync('app_token')
							},
							name: 'file', // 必须填写，后台用来接收文件
							formData: {
								file: tempFilePaths[0]
							},
							success: (uploadFileRes) => {
								var array = JSON.parse(uploadFileRes.data)
								this.info.avatar = array.data.url
							},
							fail: (uploadFileErr) => {
								console.error('图片上传失败', uploadFileErr);
							}
						});
						// 监听上传进度变化
						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress + '%');
						});
					},
					fail: (chooseImageErr) => {
						console.error('选择图片失败', chooseImageErr);
					}
				});
			},
			async editInfo() {
				const {
					data: res
				} = await uni.$http.post('school/index/editSchoolInfo', this.info)
				if (res.code == 1) {
					this.toast.msg('修改成功')
					setTimeout(() => {
						uni.navigateTo({
							url: '../index/home'
						})
					}, 1000)
				} else {
					this.toast.msg(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss">
	.headImgBox {
		width: 250rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: 0 auto 50rpx;
		margin-top: 50rpx;

		.img {
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}
	}

	.box-title {
		font-size: 38rpx;
		font-weight: 500;
		margin-top: 20rpx;
		margin-left: 5%;
	}

	.content-box {
		margin-top: 39rpx;
		width: 90%;
		height: 900rpx;
		margin-left: 5%;
		border-radius: 15px;
		border: 1px solid rgba(108, 86, 249, 0.05);
		padding: 50rpx 5%;
		position: relative;
	}

	.item_box {
		width: 100%;
		height: 180rpx;
	}

	.item-box-title {
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(0, 40, 132, 1);
	}

	.ipt {
		width: 90%;
		height: 78rpx;
		border-radius: 15px;
		background: rgba(251, 251, 253, 1);
		border: 1px solid rgba(0, 40, 132, 0.05);
		padding: 0 5%;
		margin-top: 20rpx;
		color: rgba(0, 40, 132, 1);
		font-size: 24rpx;
	}

	.btn-box {
		position: absolute;
		bottom: 30rpx;
		left: 5%;
		width: 90%;
		height: 100rpx;
	}

	.cancel-btn {
		width: 45%;
		height: 100rpx;
		float: left;
		background: rgba(251, 251, 253, 1);
		border: 1px solid rgba(0, 40, 132, 0.05);
		border-radius: 50px;
		text-align: center;
		font-size: 30rpx;
		color: rgba(176, 188, 218, 1);
		line-height: 100rpx;
	}

	.confirm-btn {
		width: 45%;
		height: 100rpx;
		float: left;
		margin-left: 10%;
		background: rgba(128, 128, 128, 1);
		border-radius: 50px;
		text-align: center;
		font-size: 30rpx;
		color: #ffffff;
		line-height: 100rpx;
	}
</style>